<template>
  <div>
    <div class="shipping-address">
      <div class="shipping-title">
        <slot name="title">
          <span class="label">{{ $t("submitParcel.shippingAddress") }}</span>
        </slot>
        <div class="left">
          <span class="default-text" @click="addMet()">{{ $t("submitParcel.addAddress") }}</span>
          <span class="fun-text" @click="selectAddressPop = true">{{ $t("submitParcel.selectAnotherAddress") }}</span>
        </div>
      </div>
      <div class="current-address">
        <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="" />
        <div class="address-info">
          <div class="left">
            <!--接收人-->
            <div class="receiver">
              <span class="name">{{ currentAddr.name }} {{ currentAddr.surname }}</span>
              <span class="contact">{{ currentAddr.regionCode ? `+${currentAddr.regionCode}` : currentAddr.regionCode }}
                {{ currentAddr.mobile }}</span>
              <span class="contact"> {{ currentAddr.postalCode }}</span>
            </div>
            <!--地址-->
            <div class="addr">
              <span>{{ currentAddr.countryText }}</span>
              <span>{{ currentAddr.provinceText }}</span>
              <span>{{ currentAddr.cityText }} {{ currentAddr.areaText }} </span>
              <span>{{ currentAddr.addressDetail }} </span>
            </div>
          </div>
          <div class="right">
            <div class="select-addr">
              <div class="default-addr" v-if="currentAddr.isDefault == true">{{ $t("submitParcel.defaultAddress") }}
              </div>
            </div>
            <div class="edit-wrap" v-if="currentAddr">
              <div class="edit" @click="edit(currentAddr)">
                <img src="@/assets/images/parcel/edit_icon.webp" alt="" />
                <span>{{ $t("submitParcel.edit") }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--选择地址弹窗-->
    <Modal width="60%" class-name="vertical-center-modal" class="pop-address" v-model="selectAddressPop"
      :title="$t('submitParcel.selectAddress')">
      <div class="user-addr">
        <div class="content">
          <!--地址列表-->
          <div class="table-wrap">
            <div class="table">
              <div class="table-header">
                <Row>
                  <Col span="6">
                  <div class="th">{{ $t("submitParcel.addressee") }}</div>
                  </Col>
                  <Col span="14">
                  <div class="th">{{ $t("submitParcel.detailedAddress") }}</div>
                  </Col>
                  <Col span="4">
                  <div class="th">{{ $t("submitParcel.operation") }}</div>
                  </Col>
                </Row>
              </div>
              <div class="table-content">
                <Row v-for="(item, index) in userAddressList" :key="index" class="table-tr tr-active">
                  <Col span="6">
                  <div class="td">{{ item.recipientName.split(",")[0] }} {{ item.recipientName.split(",")[1] }}</div>
                  </Col>
                  <Col span="14">
                  <div class="td">
                    <div>{{ item.postalCode }} +{{ item.regionCode }} {{ item.mobile }}</div>
                    <div>{{ item.addressDetail }} {{ item.areaText ? item.areaText + "," : "" }}{{ item.cityText ?
                      item.cityText + "," : "" }}{{ item.provinceText }},{{ item.countryText }}</div>
                    <div class="tag">
                      {{ item.townText }}
                    </div>
                  </div>
                  </Col>
                  <Col span="4">
                  <div class="td fun">
                    <Button @click="onSelect(item)">{{ $t("submitParcel.selectAddress") }}</Button>
                  </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>
    <!-- 添加or编辑收货地址 -->
    <create-user-address ref="createRef" @updateMet="getAddressList"></create-user-address>
  </div>
</template>

<script>
import { addressList } from "@/api/address";
import { countryAddressList, cityApiList } from "@/api/administrativedivisions";
import createUserAddress from "@/views/main/user/components/create-user-address";
export default {
  name: "shipping-address",
  components: { createUserAddress },
  data() {
    return {
      selectAddressPop: false,
      currentAddr: "", // 默认地址
      loading: false,
      userAddressList: [],
    };
  },
  created() {
    this.getAddressList();
  },
  methods: {
    addMet() {
      this.$refs.createRef.open();
    },
    onSelect(addInfo) {
      // 选择了地址
      this.currentAddr = addInfo;
      this.currentAddr.name = addInfo.recipientName.split(",")[0];
      this.currentAddr.surname = addInfo.recipientName.split(",")[1];
      this.selectAddressPop = false;
      this.$emit("on-change", this.currentAddr);
    },
    onCountryAddressList(code, type) {
      // 获取
      this[type] = [];
      countryAddressList(code)
        .then((res) => {
          this[type] = res.result;
          this.gloabalLoading = false;
        })
        .catch(() => {
          this.gloabalLoading = false;
        });
    },
    getCityList(code, type) {
      // 获取
      this[type] = [];
      cityApiList(code)
        .then((res) => {
          this[type] = res.result;
          this.gloabalLoading = false;
        })
        .catch(() => {
          this.gloabalLoading = false;
        });
    },
    // 编辑
    edit(info) {
      this.$refs.createRef.open(info);
    },
    getAddressList() {
      // 获取地址列表
      addressList().then((res) => {
        let arr = res.result.filter((item) => {
          return item.isDefault == true;
        });
        if (arr.length > 0) {
          this.currentAddr = arr[0];
          this.currentAddr.name = arr[0].recipientName.split(",")[0];
          this.currentAddr.surname = arr[0].recipientName.split(",")[1];

          this.$emit("on-change", this.currentAddr);
        } else {
          if (res.result.length > 0) {
            this.currentAddr = res.result[0];
            this.currentAddr.name = res.result[0].recipientName.split(",")[0];
            this.currentAddr.surname = res.result[0].recipientName.split(",")[1];

            this.$emit("on-change", this.currentAddr);
          }
        }
        this.userAddressList = res.result;
      });
    },
  },
};
</script>

<style scoped lang="less">
.shipping-address {
  margin-top: 40px;

  .shipping-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;

    .label {
      color: @t-title-color;
    }

    .left {
      display: flex;
      align-items: center;

      .default-text {
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        cursor: pointer;
      }

      .fun-text {
        display: block;
        cursor: pointer;
        margin-left: 24px;
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 20px;
        color: #FF186B;
        line-height: 23px;
      }
    }
  }

  .current-address {
    position: relative;
    margin-top: 16px;

    .bg-border {
      display: block;
      width: 100%;
    }

    .address-info {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      padding: 30px 40px;
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        flex-flow: column;
        // justify-content: space-between;
        height: 100%;

        .receiver {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 25px;
          color: #333333;
          line-height: 30px;

          .name {
            // font-size: 24px;
            // font-weight: 700;
          }

          .contact {
            margin-left: 24px;
            // font-size: 14px;
            // font-weight: 500;
          }
        }

        .addr {
          color: #AEB0B9;
          font-size: 16px;

          span {
            display: block;
            margin-top: 6px;
          }
        }
      }

      .right {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        height: 100%;

        .select-addr {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 400;

          .default-addr {
            padding: 2px 12px;
            color: @primary-color;
            background: #fff6f0;
            font-size: 20px;
            border-radius: 2px;
          }
        }

        .edit-wrap {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .edit {
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
              display: block;
              width: 16px;
              flex: 0 0 16px;
              height: 16px;
            }

            span {
              margin-left: 4px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #AEB0B9;
              line-height: 23px;
            }
          }
        }
      }
    }
  }
}

.user-addr {
  height: 300px;
  overflow-y: auto;

  .top {
    .num {
      margin-left: 6px;
      color: @t-text-color;
    }
  }

  .content {
    padding-bottom: 24px;

    .table-wrap {
      .table {
        &-header {
          padding: 12px;
          background: @t-table-header-bg;

          .th {
            color: @t-title-color;
            font-size: 14px;
            font-weight: 600;

            .all {
              cursor: pointer;
            }
          }
        }

        &-content {
          border-top: 1px solid @t-table-border-color;

          .table-tr {
            padding: 12px;
            border-bottom: 1px solid @t-table-border-color;
            color: @t-text-color;
            font-size: 14px;

            .fun {
              span {
                margin-right: 24px;
                color: @t-title-color;
                cursor: pointer;
              }

              .tag {
                border-radius: 4px;
                background: @primary-color;
                color: #ffffff;
                padding: 2px 4px;
              }
            }
          }
        }
      }
    }

    .page {
      text-align: right;
      margin-top: 24px;
    }
  }
}

.pop-address {
  .pop-address-content {
    .region-code {
      display: flex;
      align-items: center;

      .region-code-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 2px;
      }
    }

    .flex-content {
      .input {}

      .select {
        .option-content {
          display: flex;
          align-items: center;

          .logo {
            display: inline-block;
            width: 30px;
            margin-right: 4px;
          }
        }

        :deep(.ivu-select-input) {
          width: auto !important;
        }
      }

      .country-wrap {
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #dcdee2;
        padding: 0 8px;
      }
    }
  }
}
</style>
